<template>
    <div id="testplan">
        <div>
            <h1 class="text-success">测试计划</h1>
        </div>
        <hr>
        <div class="ibox">
            <div class="ibox-content">     
                <div class="row m-t-sm">
                    <div class="col-lg-12">
                        <div class="panel blank-panel" >
                            <div class="panel-body" >
                                <div class="tab-content">
                                    <div class="ibox-content" style="padding-bottom: 10px; padding-top: 10px;">
                                        <button class="btn btn-arrow-right mr-4" v-for="(tab,index) in tabs" v-bind:key="'info1'+index"
                                        :class="num===index?'btn-success':'btn-primary'" @click="table(index)">
                                            {{tab}}
                                        </button>
                                    </div>
                                </div>

                                <div v-show="gantt_source.length != 0" class="ibox-content" style="margin-bottom: 0px;padding-bottom: 10px;padding-top: 10px;">
                                    <Gantt :source="gantt_source"></Gantt>
                                </div>

                                <div class="row">
                                    <div class="col-lg-12" style="padding-top: 10px;">
                                        <DataTable :table_id="tableinfo_testplan.id" :table_title="tableinfo_testplan.title" :columns="tableinfo_testplan.columns" 
                                            :table_data='tableinfo_testplan.table_data' :columns_key="tableinfo_testplan.columns_key" :columnDefs="tableinfo_testplan.columnDefs">  
                                        </DataTable> 
                                    </div>
                                </div>
                                <!-- <div class="tab-content">
                                    <div class="tab-pane" :id="'tab-'+index" v-for="(tab,index) in tabs" v-bind:key="'info2'+index"
                                    :class="num===index?'active':''">
                                        <div class="row">
                                            <div class="col-lg-12">
                                            
                                                <div class="ibox" style="margin-bottom: 0px;">
                                                    <div class="ibox-content" style="padding-bottom: 5px;">
                                                        <div class="project-list">
                                                            <table class="table table-hover table-bordered">
                                                                <thead>
                                                                <tr>
                                                                    <th width="18%">任务名称</th>
                                                                    <th width="">负责人</th>
                                                                    <th width="7%">预计工时</th>
                                                                    <th width="9%">截止日期</th>
                                                                    <th width="11%">计划执行用例数</th>
                                                                    <th width="9%">任务通过率</th>
                                                                    <th width="9%">任务覆盖率</th>
                                                                    <th width="7%">提交缺陷</th>
                                                                    <th width="9%">任务完成率</th>
                                                                    <th width="8%">任务状态</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr v-for="(project,index) in all_projects" v-bind:key="'info3'+index">
                                                                        <td>{{project.rwname}}</td>
                                                                        <td>{{project.rwleader}}</td>
                                                                        <td>{{project.yjdate}}</td>
                                                                        <td>{{project.sjzdate}}</td>
                                                                        <td>{{project.totalnum}}</td>
                                                                        <td>{{project.throughputrate}}</td>
                                                                        <td>{{project.coveragerate}}</td>
                                                                        <td>{{getArrayCount(project.bugids)}}</td>
                                                                        <td>{{project.completionrate}}</td>
                                                                        <td>{{project.state}}</td>
                                                                    </tr>
                                                                    <tr v-if="all_projects.length == 0">
                                                                        <td colspan="10" class="text-center">没有可以显示的项目</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <Paginator :paginator="paginator" v-on:current_page="paginator_method"></Paginator>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="row">
			<div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <div class="project-list">
                            <table class="table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th width="20%">任务名称</th>
                                    <th width="">负责人</th>
                                    <th width="8%">预计工时</th>
                                    <th width="10%">截止日期</th>
                                    <th width="8%">用例总条数</th>
                                    <th width="11%">用例已执行条数</th>
                                    <th width="11%">用例已通过条数</th>
                                    <th width="11%">用例未通过条数</th>
                                    <th width="8%">任务状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="project in all_projects" v-bind:key="project.index">
                                        <td>{{project.rwname}}</td>
                                        <td>{{project.rwleader}}</td>
                                        <td>{{project.yjdate}}</td>
                                        <td>{{project.sjzdate}}</td>
                                        <td>{{project.totalnum}}</td>
                                        <td>{{project.executenum}}</td>
                                        <td>{{project.passnum}}</td>
                                        <td>{{project.nopassnum}}</td>
                                        <td>{{project.state}}</td>
                                    </tr>
                                    <tr v-if="all_projects.length == 0">
                                        <td colspan="9" class="text-center">没有可以显示的项目</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="btn-group">
                                <button type="button" class="btn btn-white" v-bind="{ disabled: paginator.current_page == 1 }" @click="selectPage(paginator.current_page - 1)"><i class="fa fa-chevron-left"></i></button>
                                <button v-if="paginator.has_previous" class="btn btn-white" v-bind:class="{ active: 1 === paginator.current_page }" @click="selectPage(1)">1</button>
                                <span class="btn btn-white" v-if="paginator.current_page > 7">...</span>
                                <button v-for="page in paginator.previous_pages" class="btn btn-white" :key="page" @click="selectPage(page)">{{ page }}</button>
                                <button v-if="paginator.current_page" class="btn btn-white" v-bind:class="{ active: paginator.current_page }">{{ paginator.current_page }}</button>
                                <button v-for="page in paginator.next_pages" class="btn btn-white" :key="page" @click="selectPage(page)">{{ page }}</button>
                                <span class="btn btn-white" v-if="paginator.total_page - paginator.current_page > 6">...</span>
                                <button v-if="paginator.has_next" class="btn btn-white" @click="selectPage(paginator.total_page)">{{ paginator.total_page }}</button>
                                <button type="button" class="btn btn-white" v-bind="{ disabled: paginator.total_page == paginator.current_page }" @click="selectPage(paginator.current_page + 1)"><i class="fa fa-chevron-right"></i> </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  -->
    </div>
</template>
<script>
import ComingSoon from '@/components/qa/ComingSoon.vue';
import Paginator from '@/components/qa/Paginator.vue';
import Gantt from '@/components/qa/Gantt.vue';
import DataTable from '@/components/qa/DataTable.vue';
export default {
    name: 'TestPlan',
    components: {
        Paginator,
        Gantt,
        DataTable
    },
    data () {
        return {
            user: JSON.parse(localStorage.getItem('user')),
            project_id: '',
            all_projects: [],
			total_count: null,
            paginator: {
				current_page: 1,
				total_page: 1,
				has_previous: false,
				has_next: false,
				previous_pages: [],
				next_pages: [],
				last_page: 1,
				first_page: 1
            },
            tabs: ['单元测试(UT)', '集成测试(IT)', '系统测试(ST)', '交付测试(AT)'],
            num: 0,
            testphase: '单元测试',
            gantt_source: [],
            tableinfo_testplan: {
                id: 'table_report',
                title: '测试任务数据汇总',
                columns: ['任务名称', '负责人', '预计工时','截止日期','计划执行用例数', '任务通过率', '任务覆盖率', '提交缺陷', '任务完成率', '任务状态'],
                table_data: [],
                columns_key: [
                    {data: 't_name', width: "15%"},
                    {data: 't_leader', width: ""},
                    {data: 't_plan_date', width: '7%'},
                    {data: 't_end_date', width: '9%'},
                    {data: 't_testcase_num', width: '11%'},
                    {data: 't_pass_rate', width: '9%',
                     // eslint_disable-next-line
                     render: function( data, type, row, meta) {
                        var str=Number(data*100).toFixed(2);
                        str+="%";
                        return str;
                     }
                    },
                    {data: 't_coverage_rate', width: '9%',
                     // eslint_disable-next-line
                     render: function( data, type, row, meta) {
                        var str=Number(data*100).toFixed(2);
                        str+="%";
                        return str;
                     }
                    },
                    {data: 't_bug_count', width: '7%'},
                    {data: 't_complete_rate', width: '9%',
                     // eslint_disable-next-line
                     render: function( data, type, row, meta) {
                        var str=Number(data*100).toFixed(2);
                        str+="%";
                        return str;
                     }
                    },
                    {data: 't_state', width: ''},
                ],
                columnDefs: [],
            },

        }
    },
    watch: {
        "tableinfo_testplan.table_data": {
            handler: function() {
                this.arrryHandler2(this.tableinfo_testplan.table_data);
            },
            deep: true
        }
        // all_projects: function(){
        //     this.arrryHandler2(this.all_projects);
        // }
    },
    methods: {
        getTestPlan: function(project, testphase) {
            this.$axios.get('/api/qa/gettestplan/?project='+project+'&testphase='+testphase)
                .then((response) => {
                    if (response.status == 200) {
                        this.tableinfo_testplan.table_data = response.data.testplan;
                        // console.log(this.all_projects);
                        // this.total_count = response.data.totalCount;
                        // this.paginator.current_page = response.data.currPage;
                        // this.paginator.total_page = response.data.totalPage;

                        // if (this.paginator.current_page < this.paginator.total_page) {
                        //     this.paginator.has_next = true;
                        //     if (this.paginator.total_page - this.paginator.current_page > 5) {
                        //         this.paginator.next_pages = this.range(
                        //             this.paginator.current_page + 1,
                        //             this.paginator.current_page + 6,
                        //             1
                        //         );
                        //     } else {
                        //         this.paginator.next_pages = this.range(
                        //             this.paginator.current_page + 1,
                        //             this.paginator.total_page,
                        //             1
                        //         );
                        //     }
                        // } else {
                        //     this.paginator.has_next = false;
                        // }
                        // if (this.paginator.current_page > 1) {
                        //     this.paginator.has_previous = true;
                        //     if (this.paginator.current_page - 1 > 5) {
                        //         this.paginator.previous_pages = this.range(
                        //             this.paginator.current_page - 5,
                        //             this.paginator.current_page,
                        //             1
                        //         );
                        //     } else {
                        //         this.paginator.previous_pages = this.range(
                        //             2,
                        //             this.paginator.current_page,
                        //             1
                        //         );
                        //     }
                        // } else {
                        //     this.paginator.has_previous = false;
                        // }
                        // if (this.paginator.current_page ==1) {
                        //     this.paginator.has_previous = false;
                        //     this.paginator.previous_pages = [];
                        // }
                        // if (this.paginator.current_page == this.paginator.total_page) {
                        //     this.paginator.has_next = false;
                        //     this.paginator.next_pages = [];
                        // }
                    }
                })
                .catch(function(err) {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        range(start, stop, step) {
			if (typeof stop == 'undefined') {
				// one param defined
				stop = start;
				start = 0;
			}
			if (typeof step == 'undefined') {
				step = 1;
			}
			if ((step > 0 && start >= stop) || (step < 0 && start <= stop)) {
				return [];
			}
			var result = [];
			for (var i = start; step > 0 ? i < stop : i > stop; i += step) {
                result.push(i);
			}
			return result;
        },
        selectPage(num) {
			this.paginator.current_page = num;
			this.getTestPlan(this.project_id, this.testphase);
        },
        table: function(index) {
            this.num = index;
            switch(index)
            {
            case 0:
                this.testphase = '单元测试';
                this.getTestPlan(this.project_id, 1);
                break;
            case 1:
                this.testphase = '集成测试';
                this.getTestPlan(this.project_id, 2);
                break;
            case 2:
                this.testphase = '系统测试';
                this.getTestPlan(this.project_id, 3);
                break;
            case 3:
                this.testphase = '交付测试';
                this.getTestPlan(this.project_id, 4);
                break;
            }
        },
        paginator_method: function(current_page) {
            this.paginator.current_page = current_page;
            // console.log('current_page is ' +　this.paginator.current_page)
            this.getTestPlan(this.project_id, this.testphase);
        },
        arrryHandler2: function(array) {
            var list2 = [];
            for (const element of array) {
                list2.push({
                    name: element['t_name'],
                    desc: '',
                    values: [{
                        from: "/Date("+ (new Date(element['t_start_date'])).getTime() + ")/",
                        to: "/Date(" + (new Date(element['t_end_date'])).getTime() + ")/",
                        label: "",
                        customClass: "ganttBlue" 
                    }]
                })
            }
            console.log(list2);
            this.gantt_source = list2;
            console.log(this.gantt_source);
        },
        getArrayCount: function(Array) {
            if (null == Array || "undefined" == typeof(Array) || [] == Array) {
                return 0;
            } else {
                return Array.length
            }
        }
    },
    created: function() {
        this.project_id = this.$route.params.pmsProjectId;
    },
    mounted: function() {
        console.log(this.user.token);
        this.getTestPlan(this.project_id, 1);
    }
}
</script>

